<template>
  <div>
    <h3>动态渲染的 input 聚焦问题</h3>

    <div class='container' ref='container'>
      <div v-for='(item, index) in list' :key='index' style="display: flex; margin-bottom: 10px;">
        <el-button type="primary" @click='edit(index)' style="margin-right: 10px;">{{item.title}}</el-button>
        <el-input ref='desc' v-model="item.desc" placeholder="请输入描述"></el-input>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      list: []
    }
  },
  created() {
    setTimeout(() => {
      this.list = [
        {
          title: '语文',
          desc: ''
        },
        {
          title: '数学',
          desc: ''
        }
      ]
    }, 2000);
  },
  methods: {
    edit(index) {
      // 可能这里不一定能focus
      // this.$refs['desc'][index].focus()

      this.$nextTick(() => {
        this.$refs['desc'][index].focus()
      })
    }
  }
}
</script>